<template>
  <div class="shelf-list" :style="{top: shelfListTop}">
    <!-- transition-group与transition不同的是，会给下面遍历的每一个item都添加class，将以一个实际dom形式存在 -->
    <transition-group name="list"
                      tag="div"
                      id="shelf-list">
      <div class="shelf-list-item-wrapper" v-for="(item, index) in data" :key="index">
        <shelf-item :data="item" :style="{height: itemHeight}"></shelf-item>
        <div class="shelf-list-title-wrapper">
          <!-- .title-small {}在home.scss中已经定义出来了，直接使用 -->
          <span class="shelf-list-title title-small">{{item.title ?item.title : item.groupName}}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import ShelfItem from './ShelfItem'
  import { realPx, px2rem } from '../../utils/utils'

  export default {
    mixins: [storeShelfMixin],
    components: {
      ShelfItem
    },
    props: {
      top: {
        type: Number,
        default: 188 // 94
      },
      data: Array
    },
    computed: {
      // shelfList距离顶部的距离
      shelfListTop() {
        return px2rem(this.top) + 'rem'
      },
      itemHeight() {
        // h / w = 350 / 250
        // h = w * （350 / 250）realPx(240)
        return ((window.innerWidth - realPx(102)) / 3) / 250 * 350 + 'px'// 120,表示一排三本书封面的高度
      }
    },
    created() {
      // console.log('接受的书架列表', this.data)
      // console.log('距离顶上的数据', this.shelfListTop)
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .shelf-list {
    border-top: solid px2rem(10) #0000;
    position: absolute;
    // top: px2rem(188);// 94
    left: 0;
    z-index: 100;
    width: 100%;
    #shelf-list {
      // 水平排列，并且换行
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      padding: 0 px2rem(30);// 15
      box-sizing: border-box;
      .shelf-list-item-wrapper {
        flex: 0 0 33.33%;
        width: 33.33%;
        padding: px2rem(30);//15
        box-sizing: border-box;
        // 当列表残生变化的时候
        &.list-leave-active {
          display: none;
        }
        &.list-move {
          transition: transform 10s;
        }
        .shelf-list-title-wrapper {
          margin-top: px2rem(20);// 10
          // font-size: px2rem(28);
          // padding: px2rem(5) 0;
          // line-height: px2rem(40);
        }
      }
    }
  }
</style>
